<template>
	<div class="system-menu-container">
		<div class="breadcrumb-box">
			<Breadcrumb />
		</div>

		<div class="page-main flex space-between" ref="pageMain">
			<div class="page-l">
				<div class="common-title">
					列表
				</div>

				<div class="search-box flex align-center">
					<el-date-picker size="default" v-model="state.apiData.operationAt" type="date" format="YYYY-MM-DD"
						value-format="YYYY-MM-DD" placeholder="请选择手术时间" @change="getList" />

					<el-select v-model="state.apiData.status" placeholder="请选择通知发送状态" size="default"
						style="width: 180px;margin-left: 20px;" clearable @change="getList">
						<el-option label="已发送" :value="1"></el-option>
						<el-option label="未发送" :value="2"></el-option>
					</el-select>
				</div>

				<div class="export-box flex justify-end">
					<!-- <el-button type="primary" size="default" @click="exportExcel()">
						导出Excel
					</el-button> -->
				</div>

				<el-table :data="state.tableData.data" :span-method="spanMethod" v-loading="state.tableData.loading" border
					style="width: 100%" :height="state.tableHeight" ref="multipleTableRef" @select="handleSelectChange"
					:header-cell-class-name="cellClass">
					<el-table-column type="selection" width="55" align="center" />
					<!-- <el-table-column type="index" label="序号" width="80" align="center" /> -->
					<el-table-column label="主刀医生" width="100" show-overflow-tooltip align="center">
						<template #default="scope">
							{{ scope.row.operation && scope.row.operation.chiefDoctor ? scope.row.operation.chiefDoctor.name : '-' }}
						</template>
					</el-table-column>
					<el-table-column label="主刀电话" width="120" show-overflow-tooltip align="center">
						<template #default="scope">
							{{ scope.row.operation && scope.row.operation.chiefDoctor ? scope.row.operation.chiefDoctor.phone : '-' }}
						</template>
					</el-table-column>
					<el-table-column label="手术科室" width="120" show-overflow-tooltip align="center">
						<template #default="scope">
							{{ scope.row.operation && scope.row.operation.department ? scope.row.operation.department.departmentName :
								'-' }}
						</template>
					</el-table-column>
					<el-table-column prop="patient.name" label="患者姓名" width="100" show-overflow-tooltip
						align="center"></el-table-column>
					<el-table-column prop="patient.phone" label="电话" width="120" show-overflow-tooltip
						align="center"></el-table-column>
					<el-table-column label="手术时间" width="140" show-overflow-tooltip align="center">
						<template #default="scope">
							{{ scope.row.operation && scope.row.operation.operationAt ? scope.row.operation.operationAt : '-' }}
						</template>
					</el-table-column>
					<el-table-column label="上下午" show-overflow-tooltip align="center" width="80">
						<template #default="scope">
							{{ scope.row.operation && scope.row.operation.period == 'AM' ? '上午' : '下午' }}
						</template>
					</el-table-column>

					<el-table-column label="手术" width="150" show-overflow-tooltip align="center">
						<template #default="scope">
							{{ scope.row.operation && scope.row.operation.operation ? scope.row.operation.operation.name : '-' }}
						</template>
					</el-table-column>
					<el-table-column label="麻醉" width="140" show-overflow-tooltip align="center">
						<template #default="scope">
							{{ (scope.row.anesthesiaAssessment && scope.row.anesthesiaAssessment.anesthesiaMode) ?
								scope.row.anesthesiaAssessment.anesthesiaMode.name : '-' }}
						</template>
					</el-table-column>
					<el-table-column label="当前状态" show-overflow-tooltip align="center" width="100">
						<template #default="scope">
							{{ scope.row.noticeDoctor ? '已发送' : '未发送' }}
						</template>
					</el-table-column>
					<el-table-column prop="hospital_id" label="房间号" width="100" show-overflow-tooltip align="center">
						<template #default="scope">
							{{ scope.row.operation && scope.row.operation.operationRoom ? scope.row.operation.operationRoom + '号手术室' :
								'-' }}
						</template>
					</el-table-column>
					<el-table-column prop="hospital_id" label="台次" width="100" show-overflow-tooltip align="center">
						<template #default="scope">
							{{ scope.row.operation && scope.row.operation.num ? '第' + scope.row.operation.num + '台次' : '-' }}
						</template>
					</el-table-column>
				</el-table>

				<div class="pagination-box">
					<el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" class="mt15"
						:pager-count="5" :page-sizes="[10, 20, 30]" v-model:current-page="state.apiData.page" background
						v-model:page-size="state.apiData.pageSize" layout="total, sizes, prev, pager, next, jumper"
						:total="state.tableData.total">
					</el-pagination>
				</div>

			</div>
			<div class="page-r">
				<div class="common-title" style="margin-bottom:20px;">
					通知信息
				</div>
				<el-scrollbar v-if="state.doctorId" v-loading="state.templateLoading">

					<el-input v-model="state.noticeTemplate" :autosize="{ minRows: 18 }" type="textarea" placeholder="请输入通知内容"
						maxlength="500" show-word-limit />



					<el-button type="primary" size="default" style="width: 100%;margin: 20px 0;" @click="sendNotice()" :loading="state.sendLoading">
						发送
					</el-button>

				</el-scrollbar>
				<el-empty v-else description="请选择发送人" />

			</div>
		</div>


	</div>
</template>

<script setup name="dsProcess-notice-doctor">
import dayjs from 'dayjs'
import { formatWeedDay } from '/@/utils/formatTime';
import { getCurrentInstance } from 'vue';
import { noticeApi } from '/@/api/ds/notice'
import { toolsApi } from '/@/api/tools'
import { ElMessage, ElMessageBox } from 'element-plus';
// 引入组件
const Breadcrumb = defineAsyncComponent(() => import('/@/layout/navBars/breadcrumb/breadcrumb.vue'));
const multipleTableRef = ref(null)

// 定义变量内容
const state = reactive({
	apiData: {
		page: 1,
		pageSize: 10,
		operationAt: null,
		status: '',
		type: 2
	},
	tableData: {
		data: [],
		loading: false,
		total: 0
	},
	tableHeight: '30vh',
	doctorId: null,
	operationAt: null,
	doctorConfig: null,
	noticeTemplate: '',
	templateLoading: false,

	chiefDoctorInArr: [],//合并主刀医生
	chiefDoctorInArrIndex: 0,//合并主刀医生编号索引
	departmentInArr: [],
	departmentInArrIndex: 0,
	sendLoading: false
});








// 页面加载时
onMounted(() => {
	state.tableHeight = getCurrentInstance().refs.pageMain.offsetHeight - 250 + "px";
	getFourDays()
	getList()
	// getHotWords()
});


const cellClass = (row) => {
	if (row.columnIndex === 0) {
		return 'DisableSelection'
	}
}

const getFourDays = () => {
	state.apiData.operationAt = dayjs().startOf('day').format('YYYY-MM-DD')
}

// 格式化radio显示
const formatValue = (value) => {
	return dayjs(value * 1000).format("MM.DD") + ' ' + formatWeedDay(dayjs(value * 1000).day())
}






// 获取热词
const getHotWords = () => {
	noticeApi().noticeConfig().then(res => {
		state.doctorConfig = res.data.doctor
		state.noticeTemplate = res.data.doctor.template
	})

}

// 发送通知按钮
const sendNotice = () => {
	ElMessageBox.confirm(`确认发送通知吗?`, '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
	})
		.then(() => {
			state.sendLoading = true
			const apiData = {
				doctorId: state.doctorId,
				operationAt: state.operationAt
			}

			noticeApi().sendDoctor(apiData).then(res => {
				state.sendLoading = false
				ElMessage.success('操作成功');
				getList()
				state.doctorId = null
				state.operationAt = null
			})
		})
		.catch(() => {
			state.sendLoading = false
		});
}

const handleSelectChange = (selection,row) => {
	console.log(row)
	multipleTableRef.value.clearSelection();//先清空选中状态，selection值还在
	if (selection.length === 0){//这里状态为勾选
		return;
	}
	multipleTableRef.value.toggleRowSelection(row,true);//用于切换某行选中状态
	state.doctorId = row.operation.chiefDoctorId
	state.operationAt = row.operation.operationAt
	getTemplate()

}


const getTemplate = () => {
	state.templateLoading = true
	toolsApi().getNoticeDoctorTemplate({ doctorId: state.doctorId, operationAt: state.operationAt }).then(res => {
		state.templateLoading = false
		state.noticeTemplate = res.data.content
	}).catch(() => {
		state.templateLoading = false
	})
}


// 分页改变
const onHandleSizeChange = (val) => {
	state.apiData.pageSize = val;
	getList();
};
const onHandleCurrentChange = (val) => {
	state.apiData.page = val;
	getList();
};



// 获取列表
const getList = () => {
	mergeInit()
	state.tableData.loading = true
	const newApiData = JSON.parse(JSON.stringify(state.apiData))
	noticeApi().noticeDoctorList(newApiData).then(res => {
		state.tableData.loading = false
		state.tableData.data = res.data.items
		state.tableData.total = res.data.total

		if (res.data.items.length > 0) {
			for (var i = 0; i < res.data.items.length; i++) {
				if (i === 0) {
					//第一行必须存在，以第一行为基准
					state.chiefDoctorInArr.push(1);
					state.chiefDoctorInArrIndex = 0;
					state.departmentInArr.push(1);
					state.departmentInArrIndex = 0;
				} else {
					// 判断当前元素与上一元素是否相同

					// 合并主刀医生
					if (res.data.items[i].operation.chiefDoctorId == res.data.items[i - 1].operation.chiefDoctorId) {
						state.chiefDoctorInArr[state.chiefDoctorInArrIndex] += 1;
						state.chiefDoctorInArr.push(0);
					} else {
						state.chiefDoctorInArr.push(1);
						state.chiefDoctorInArrIndex = i;
					}

					// 合并手术科室,注意if条件以前面列为基准
					if (res.data.items[i].operation.chiefDoctorId == res.data.items[i - 1].operation.chiefDoctorId
						&& res.data.items[i].operation.departmentId == res.data.items[i - 1].operation.departmentId
					) {
						state.departmentInArr[state.departmentInArrIndex] += 1;
						state.departmentInArr.push(0);
						
					} else {
						state.departmentInArr.push(1);
						console.log(state.departmentInArr)
						state.departmentInArrIndex = i;
					}
				}

			}
		}
	})

}


const mergeInit = () => {
	state.chiefDoctorInArr = []
	state.chiefDoctorInArrIndex = 0
	state.departmentInArr = []
	state.departmentInArrIndex = 0
}


const spanMethod = ({
	row,
	column,
	rowIndex,
	columnIndex,
}) => {
	if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2) {
		const row1 = state.chiefDoctorInArr[rowIndex];
		const col1 = row1 > 0 ? 1 : 0;
		return {
			rowspan: row1,
			colspan: col1
		};
	} else if (columnIndex === 3) {
		// 手术科室
		const row2 = state.departmentInArr[rowIndex];
		const col2 = row2 > 0 ? 1 : 0;
		return {
			rowspan: row2,
			colspan: col2,
		};
	}

}
</script>

<style lang="scss" scoped>
.page-main {
	width: 100%;
	height: calc(100vh - 100px);


	:deep() .el-table .DisableSelection .cell .el-checkbox__inner {
		display: none;
	}

	:deep() .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
		background-color: #fff;
	}

	.search-box {
		margin-top: 20px;
	}

	.export-box {
		padding-top: 20px;
	}

	.page-l,
	.page-r {
		padding: 20px;
		background-color: #fff;
		border-radius: 10px;
	}

	.page-l {
		width: 70%;
		height: 100%;


	}

	.page-r {
		width: 28.5%;
		height: 100%;

		.hotwords-list {
			:deep() .el-checkbox {
				margin-right: 0 !important;
			}

			:deep() .el-checkbox__input {
				display: none !important;
			}

			:deep() .el-checkbox__label {
				padding: 0;
			}

			.check-box {
				width: 49%;
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				gap: 5%;
			}
		}

		.sp-line {
			margin: 20px 0;
			width: 100%;
			height: 1px;
			background-color: #e0e0e0;
		}

	}

	.sub-title {
		color: #999;
		font-size: 13px;
		margin: 10px 2px;
	}




}
</style>
